{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="body"}
<div class="p-3">
    <form class="layui-form gg-form-bar border-x border-t" lay-filter="barsearchform">

    </form>
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
    </div>
</script>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
    const moduleInit = ['tool'];
    // {
    //     field: 'check_status', title: '状态', align: 'center', width: 200, templet: function (d) {
    //     var html = '<span class="layui-btn layui-btn-xs layui-bg-' + d.check_status + '">' + d.status_name + '</span>';
    //     return html;
    // }
    // },
    function gouguInit() {
        var table = layui.table, tool = layui.tool, form = layui.form;
        layui.pageTable = table.render({
            elem: '#test',
            title: '变更',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', {title: '导出EXCEL', layEvent: 'LAYTABLE_EXCEL', icon: 'layui-icon-export'}],
            url: "/user/myxz/index", //数据接口
            cellMinWidth: 80,
            page: true, //开启分页
            limit: 20,
            cols: [
                [ //表头
                    {
                        field: 'id',
                        title: '编号',
                        align: 'center',
                        width:80
                    }, {
                    field: 'title',
                    title: '标题',
                },  {
                    field: 'month',
                    title: '月份',
                    align: 'center',
                },{
                    field: 'name',
                    title: '姓名',
                }, {
                    field: 'base_salary',
                    title: '基本薪资',
                    align: 'center',
                }, {
                    field: 'security',
                    title: '五险扣除',
                    align: 'center',
                },{
                    field: 'performance',
                    title: '提成奖金',
                    align: 'center',
                },{
                    field: 'checking',
                    title: '全勤奖',
                    align: 'center',
                },{
                    field: 'allowance',
                    title: '补差',
                    align: 'center',
                },{
                    field: 'money',
                    title: '综合薪资',
                    align: 'center',
                },{
                    field: 'remark',
                    title: '备注',
                    align: 'center',
                },//
                    {
                    field: 'state', title: '状态', align: 'center', width: 120,
                    templet: function (d) {
                        if (d.state == 0) {
                            html = '<span class="blue">未发放</span>';
                        }
                        else if (d.state == 1) {
                            html = '<span class="green">已发放</span>';
                        }
                        return html;
                    }
                }
                ]
            ]
        });

        //表头工具栏事件
        table.on('toolbar(test)', function (obj) {

        });
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;

        });

        //监听搜索提交
        form.on('submit(webform)', function (data) {
            layui.pageTable.reload({
                where: {
                    keywords: data.field.keywords,
                    cate_id: data.field.cate_id,
                    type: data.field.type,
                    check_status: data.field.check_status
                },
                page: {
                    curr: 1
                }
            });
            return false;
        });
    }
</script>
{/block}
<!-- /脚本 -->
